<!DOCTYPE HTML>
<html>
<head>
    <title>The Aditii Website Template | Details </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/sweetalert.css" rel="stylesheet">
    <!-- start details -->
    <link rel="stylesheet" type="text/css" href="css/productviewgallery.css" media="all"/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/cloud-zoom.1.0.3.min.js"></script>
    <!--<script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>-->
    <!--<script type="text/javascript" src="js/jquery.fancybox-buttons.js"></script>-->
    <!--<script type="text/javascript" src="js/jquery.fancybox-thumbs.js"></script>-->
    <script type="text/javascript" src="js/productviewgallery.js"></script>
    <!-- start top_js_button -->
    <!--<script type="text/javascript" src="js/jquery.min.js"></script>-->
    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <!--<script type="text/javascript">-->
    <!--jQuery(document).ready(function($) {-->
    <!--$(".scroll").click(function(event){		-->
    <!--event.preventDefault();-->
    <!--$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);-->
    <!--});-->
    <!--});-->
    <!--</script>-->
</head>
<body>
<!-- start header -->
<div class="header_bg">
    <div class="wrap">
        <div class="header">
            <div class="logo">
                <a href="index.html"><img src="images/logo.png" alt=""/> </a>
            </div>
            <div class="h_icon">
                <ul class="icon1 sub-icon1">
                    <li><a class="active-icon c1" href="#"><i>M</i></a>
                        <ul class="sub-icon1 list">
                            <li><h3>shopping cart empty</h3><a href=""></a></li>
                            <li><p>if items in your wishlit are missing, <a href="contact.html">contact us</a> to view
                                them</p></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="h_search">
                <form>
                    <input type="text" value="">
                    <input type="submit" value="">
                </form>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>
<div class="header_btm">
    <div class="wrap">
        <div class="header_sub">
            <div class="h_menu">
                <ul>
                    <li class="active"><a href="/index">Home</a></li>
                    |
                    <li><a href="contact.html">Contact us</a></li>
                </ul>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>
<!-- start main -->
<div class="main_bg">
    <div class="wrap">
        <div class="main">
            <!-- start content -->
            <div class="single">
                <!-- start span1_of_1 -->
                <!--<div class="left_content">-->
                <!-- start span1_of_1 -->
                <div class="span1_of_1_des">
                    <div class="desc1">
                        <h3>${commodityName} </h3>
                        <p>${commodityDescription}</p>
                        <h5>¥ ${price}</h5>
                        <div class="available">
                            <div class="btn_form">
                                <button class="btn btn-info" data-toggle="modal"
                                        data-target="#payModal">立即购买
                                </button>
                                <!--<form>-->
                                <!--<input type="submit" value="立即购买" title="" />-->
                                <!--</form>-->
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div class="share-desc">
                            <div class="share">
                                <h4>Share Product :</h4>
                                <ul class="share_nav">
                                    <li><a href="#"><img src="images/facebook.png" title="facebook"></a></li>
                                    <li><a href="#"><img src="images/twitter.png" title="Twiiter"></a></li>
                                    <li><a href="#"><img src="images/rss.png" title="Rss"></a></li>
                                    <li><a href="#"><img src="images/gpluse.png" title="Google+"></a></li>
                                </ul>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
                <!-- start tabs -->
                <section class="tabs">
                    <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked">
                    <label for="tab-1" class="tab-label-1">所含服务包</label>

                    <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2">
                    <label for="tab-2" class="tab-label-2">consumer electronics</label>

                    <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3">
                    <label for="tab-3" class="tab-label-3">semiconductor</label>

                    <div class="clear-shadow"></div>

                    <div class="content">
                        <div class="content-1">
                            <p class="para top"><span>${commodityName}</span> 含以下服务包:</p>
                            <ul>
                                <#list apiPackageList as apiPackage>
                                    <li>${apiPackage.apiPackageName}</li>
                                </#list>
                            </ul>
                            <div class="clear"></div>
                        </div>
                        <div class="content-2">
                            <p class="para"><span>WELCOME </span> Contrary to popular belief, Lorem Ipsum is not simply
                                random text. It has roots in a piece of classical Latin literature from 45 BC, making it
                                over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in
                                Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum
                                passage, and going through the cites of the word in classical literature, discovered the
                                undoubtable source. Lorem Ipsum comes from sections </p>
                            <ul class="qua_nav">
                                <li>Multimedia Systems</li>
                                <li>Digital media adapters</li>
                                <li>Set top boxes for HDTV and IPTV Player applications on various Operating Systems and
                                    Hardware Platforms
                                </li>
                            </ul>
                        </div>
                        <div class="content-3">
                            <p class="para top"><span>LOREM IPSUM</span> There are many variations of passages of Lorem
                                Ipsum available, but the majority have suffered alteration in some form, by injected
                                humour, or randomised words which don't look even slightly believable. If you are going
                                to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing
                                hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to
                                repeat predefined chunks as necessary, making this the first true generator on the
                                Internet. It uses a dictionary of over 200 Latin words, combined </p>
                            <ul>
                                <li>Research</li>
                                <li>Design and Development</li>
                                <li>Porting and Optimization</li>
                                <li>System integration</li>
                                <li>Verification, Validation and Testing</li>
                                <li>Maintenance and Support</li>
                            </ul>
                            <div class="clear"></div>
                        </div>
                    </div>
                </section>
                <!-- end tabs -->
            </div>
        </div>
    </div>
    <!-- start footer -->
    <div class="footer_bg">
        <div class="wrap">
            <div class="footer">
                <!-- start grids_of_4 -->
                <div class="grids_of_4">
                    <div class="grid1_of_4">
                        <h4>featured sale</h4>
                    </div>
                    <div class="grid1_of_4">
                        <h4>women store</h4>
                    </div>
                    <div class="grid1_of_4">
                        <h4>quick links</h4>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框-->
    <div class="modal fade" id="payModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        订单信息
                    </h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="order_form">
                        <input type="hidden" id="commodityId" name="commodityId" value="${commodityId}">
                        <div class="form-group">
                            <label for="commodityName" class="col-sm-3 control-label">商品名</label>
                            <div class="col-sm-9">
                                <!--<input type="text" id="apipackageName">${commodityName}</input>-->
                                <input type="text" class="form-control" id="commodityName"
                                       name="commodityName" value="${commodityName}"
                                       readonly="true">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="term" class="col-sm-3 control-label">有效时长(s)</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="term"
                                       name="term" value="${term}" readonly="true">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="price" class="col-sm-3 control-label">价格(元)</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="price"
                                       name="price" value="${price}" readonly="true">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="commodityDescription" class="col-sm-3 control-label">描述文档</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="commodityDescription"
                                       name="commodityDescription" value="${commodityDescription}"
                                       readonly="true">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消
                            </button>
                            <button type="button" class="btn btn-primary" onclick="confirmOrder()">
                                提交订单
                            </button>
                            <span id="tip"> </span>
                        </div>
                    </form>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
        <!--</form>-->
    </div>
    <!-- 模态框-->
    <div class="modal fade" id="confirmPayModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabe"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabe">
                        支付信息
                    </h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="pay_form">
                        <!--<input type="hidden" id="tradeId" name="commodityId" value="">-->
                        <div class="form-group">
                            <label for="commodityName" class="col-sm-3 control-label">订单编号</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="tradeId"
                                       name="tradeId" value=""
                                       readonly="true">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="payCommodityName" class="col-sm-3 control-label">商品名称</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="payCommodityName"
                                       name="payCommodityName" value="" readonly="true">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="payPrice" class="col-sm-3 control-label">支付金额(元)</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="payPrice"
                                       name="payPrice" value="" readonly="true">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消支付
                            </button>
                            <button type="button" class="btn btn-primary" onclick="confirmPay()">
                                确认支付
                            </button>
                        </div>
                    </form>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
        <!--</form>-->
    </div>
    <!-- start footer -->
    <div class="footer_bg1">
        <div class="wrap">
            <div class="footer">
                <a href="#" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 1;"></span></a>
                <!--end scroll_top_btn -->
                <div class="copy">
                    <p class="link">Copyright &copy; 2014.Company name All rights reserved.<a target="_blank"
                                                                                              href="http://www.cssmoban.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
                        - More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a></p>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
    <script src="js/application/details.js"></script>
    <script src="js/sweetalert.min.js"></script>
</body>
</html>